<template>
  <el-dialog title="Data View" :visible.sync="dialogVisible" width=95% append-to-body @close="closeHanlder">
    <ejs-grid         :dataSource="dataSource" :key="JSON.stringify(dataSource)"
                      :allowResizing="gadgetSetting.allowResizing"
                      :allowFiltering="gadgetSetting.allowFiltering"
                      :filterSettings="gadgetSetting.filterSettings"
                      :allowGrouping="gadgetSetting.allowGrouping"
                      :allowPaging="gadgetSetting.allowPaging"
                      :toolbar="gadgetSetting.toolbar"
                      :allowTextWrap="gadgetSetting.allowTextWrap"
                      :showColumnChooser="gadgetSetting.showColumnChooser"
                      :allowReordering="gadgetSetting.allowReordering"
                      :allowSorting="gadgetSetting.allowSorting"
                      :pageSettings="gadgetSetting.pageSettings"
                      ref="datagrid"
                      :dataBound="dataBound"
                      :showColumnMenu='gadgetSetting.showColumnMenu'
                      :allowExcelExport='gadgetSetting.allowExcelExport'
                      :allowPdfExport='gadgetSetting.allowPdfExport'>
            </ejs-grid>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      gadgetSetting: {
        showColumnMenu: true,
        allowResizing: true,
        allowFiltering: true,
        filterSettings: { type: 'Excel' },
        allowGrouping: true,
        allowPaging: true,
        allowExcelExport: true,
        allowPdfExport: true,
        toolbar: ['PdfExport', 'CsvExport', 'Search', 'ColumnChooser'],
        showColumnChooser: true,
        groupOptions: { columns: [name] },
        allowReordering: true,
        allowSorting: true,
        allowTextWrap: true,
        height: 437,
        pageSettings: { pageSize: 50, pageSizes: [50, 100, 200, 1000], pageCount: 4 },
        groupSettings: { allowReordering: false, columns: [], disablePageWiseAggregates: false, enableLazyLoading: false, showDropArea: true, showGroupedColumn: false, showToggleButton: false }
      },
      dataSource: []
    }
  },
  methods: {
    init (data) {
      this.dataSource = data
      this.dialogVisible = true
    },
    dataBound: function () {
      this.$refs.datagrid.autoFitColumns()
    },
    closeHanlder () {
      this.dataSource = []
    }
  }
}
</script>
